// 地区,网点 选择树
<template>
  <div class="addr-container">
    <el-cascader class="addr-select" ref="addr_branch" placeholder="省市区.街道.网点" :options="list_province"
      :props="the_props" @change="handleNode" filterable>
    </el-cascader>
  </div>
</template>

<script>
  import waves from '@/directive/waves' // waves directive
  import {
    getProvinces,
    getCity,
    getArea,
    getStreet,
    getUserAddress
  } from '@/api/address'
  import {
    branchList
  } from "@/api/branch";
  import {
    allBranch
  } from "@/api/login";
  import {
    groupInfoList
  } from "@/api/workorder";

  const calendarTypeOptions = [{
      key: 'CN',
      display_name: 'China'
    },
    {
      key: 'US',
      display_name: 'USA'
    },
    {
      key: 'JP',
      display_name: 'Japan'
    },
    {
      key: 'EU',
      display_name: 'Eurozone'
    }
  ]

  // arr to obj, such as { CN : "China", US : "USA" }
  const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})

  export default {
    name: 'AddrSelect',
    components: {},
    directives: {
      waves
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }
        return statusMap[status]
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type]
      }
    },
    props: {
      select_level: { // 任意选 或 只能选中末位叶子节点
        type: [Number, String],
        default: 0
      },
      group_id: {
        type: [Number, String],
        default: ''
      }
    },
    data() {
      let Idd = ''
      let group_id = this.group_id
      console.log('group_id :>> ', group_id);
      return {
        list_province: [],
        the_props: { // 级联选择器的 配置
          checkStrictly: true, // 父子节点不相互关联
          lazy: true,
          lazyLoad(node, resolve) {
            console.log('等级 :>> ', node.level);
            if (node.level == 1) getCity({
              provinceCode: node.value
            }).then(res => {
              window.localStorage.setItem('corporation_prin', node.label)
              const list = res.data.map((item, i) => {
                item.value = item.cityCode
                item.label = item.cityName
                return item
              })
              resolve(list)
            })
            else if (node.level == 2) getArea({
              cityCode: node.value
            }).then(res => {
              window.localStorage.setItem('corporation_city', node.label)
              const list = res.data.map((item, i) => {
                item.value = item.areaCode
                item.label = item.areaName
                return item
              })
              resolve(list)
            })
            else if (node.level == 3) getStreet({
              areaCode: node.value
            }).then(res => {
              window.localStorage.setItem('corporation_area', node.label)
              const list = res.data.map((item, i) => {
                item.value = item.streetCode
                item.label = item.streetName
                return item
              })
              resolve(list)
            })
            else if(node.level == 4) groupInfoList().then(res => {
              Idd = node.value
              window.localStorage.setItem('corporation_area', node.label)
              const list = res.data.map((item, i) => {
                item.value = item.id
                item.label = item.name
                return item
              })
              resolve(list)
            })
            else if(node.level == 5) {
              allBranch({groupId: node.value ,streetCode: Idd}).then(res => {
              console.log('能出来吗 :>> ', res);
                if (res.data.length == 0 ) {
                  window.localStorage.setItem('corporation_street', node.label)
                  const list = [
                    {
                      value: "1",
                      label: "暂无数据",
                      disabled: true
                    }
                  ]
                  
                  resolve(list)
                } else {
                  window.localStorage.setItem('corporation_street', node.label)
                  const list = res.data.map((item,i) => {
                    item.value = item.id
                    item.label = item.name
                    return item
                  })
                  resolve(list)
                }
              })
            }
            else if(node.level == 6) {
              resolve()
            }
          }
        },
        cut_node: '', // 当前节点
        cut_level: '', // 当前节点的等级
        list_group: [{
          id: 11,
          label: '邮政'
        }, {
          id: 12,
          label: '圆通'
        }, {
          id: 13,
          label: '申通'
        }, {
          id: 14,
          label: '中通'
        }, {
          id: 15,
          label: '韵达'
        }, {
          id: 16,
          label: '顺丰'
        }],
      }
    },
    watch: {

    },
    created() {
      this.getProvinces()
    },
    mounted() {
      if (this.select_level == 1) this.the_props.checkStrictly = false
    },
    computed: {

    },
    methods: {
      // 清空节点
      clearNodes() {
        this.$refs['addr_branch'].$refs.panel.clearCheckedNodes();
      },
      // 切换地点
      handleNode(newval) {
        this.cut_level = newval.length - 1 || 0
        this.cut_node = newval[newval.length - 1]
        this.$emit('changenode', this.cut_node, this.cut_level, newval)
      },


      // 获取省份
      getProvinces() {
        getProvinces().then(res => {
          this.list_province = res.data || []
          this.list_province = this.list_province.map((item, i) => {
            item.value = item.provinceCode
            item.label = item.provinceName
            return item
          })
        })
      },

    }
  }
</script>

<style lang="scss">
  $theme_text: #0F8BFD;
  $backg:rgba(0, 0, 0, 0);
  $deep_text: #5E5E5E;

  $border_color: #D4D4D4;
  $border_light: #D9DADA;
  $theme: #00805a;
  $theme_bg: #2b303b;
  $text_light: #9fa1a2;
  $text_middle: #c0c0c0;
  $text_dark: #2b303b;
  $obj_white: #ffffff;



  .formitem-container {}
</style>


<style lang="scss" scoped>
  $theme_text: #0F8BFD;
  $backg:rgba(0, 0, 0, 0);
  $deep_text: #5E5E5E;

  $border_color: #D4D4D4;
  $border_light: #D9DADA;
  $theme: #00805a;
  $theme_bg: #2b303b;
  $text_light: #9fa1a2;
  $text_middle: #c0c0c0;
  $obj_white: #ffffff;

  .addr-container {
    .addr-select {
      width: 100%
    }
  }
</style>
